// 获取数据
var infoid = location.search.slice(1)
var infoData
for (var key in showData.main) {
    if (infoid == showData.main[key].goods_id) {
        infoData = showData.main[key]
    }
}

$('.trigger').hover(function () {
    $(this).find('.trigger-son').addClass('show');
    $(this).addClass('bor');
    $('#tri').removeClass('bor');
}
    , function () {
        $(this).find('.trigger-son').removeClass('show');
        $(this).removeClass('bor');
    });


$('#tri').hover(function () {
    $(this).addClass('red');
}, function () {
    $(this).removeClass('red');
})

// 给导航栏遮挡子元素上边框
$('.blank-1').width(134);
$('.blank-2').width(84)

// 给主要内容区域渲染高度
$('.product-info').height(614);


$('.max-img').find('img').attr('src', infoData.goods_thumb[0])

// 渲染生成小图li
function showpicdata(data) {
    var adddata = '';
    var temp = ""
    for (var key in data) {
        adddata += `  <li><img src="${data[key]}"
        alt="" width="58px"></li>`
    }
    temp = ` <img src="${data[0]}" alt="" width="389px">
        <div class="mask">
          </div>
    `
    $('.show-img').html(temp);
    $('.spec-list-items ul').html(adddata);
}
// 这有问题
showpicdata(infoData.goods_thumb);
// console.log(infoData.goods_thumb[0]);


// 给轮播图片渲染宽度
var ind = $('.spec-list-items').find('li');

$('.spec-list-items').find('ul').width(75 * ind.length)
$($('.spec-list-items').find('li')[0]).css('border', '1px solid red')

$('.spec-list-items').find('li').hover(function () {
    $('.spec-list-items').find('li').css('border', '1px solid #fff')
    // 获取li中img的src地址
    var str = $(this).find('img').attr('src')
    // console.log(str);
    $(this).css('border', '1px solid red');
    // 渲染到放大镜中
    $(this).parents('.spec-list').prev().find('img').attr('src', str)
    $(this).parents('.preview').children('.max-img').find('img').attr('src', str)
}, function () {

});


// 点击图片放大
$('.show-img').click(function () {
    var str = $(this).find('img').attr('src');
    // console.log(str);
    $('.all-mask img').attr('src', str);
    $('.all-mask ').css('display', 'block');
    // $('.all-mask').fadeOut(6000, 'linear', function() {
    //     console.log('动画完毕');
    // })
});
$('.all-mask').click(function () {
    // $('.all-mask').fadeIn(6000, 'linear', function() {
    //     console.log('动画完毕');
    // })
    $('.all-mask ').css('display', 'none');
})
// 点击箭头切换下一栏









// 点击箭头切换下一栏
$('.small-icon').hover(function () {
    $('.small-icon').find('.square').css('border', '1px solid red');
    $('.small-icon').css('color', 'red');
}, function () {
    $('.small-icon').find('.square').css('border', '1px solid #d2d2d2');
    $('.small-icon').css('color', '#555');
});

$('.collection').hover(function () {
    // console.log($(this).find('.penteagram')[0]);
    var img1 = $(this).find('.penteagram')[0];
    $(img1).addClass('XXX');
    $($(this).find('.penteagram')[1]).removeClass('XXX');
    $('.collection').css('color', 'red');
}, function () {
    $($(this).find('.penteagram')[0]).removeClass('XXX');
    $($(this).find('.penteagram')[1]).addClass('XXX');
    $('.collection').css('color', '#555');
});
$('.report').hover(function () {
    $(this).css('color', 'red');
}, function () {
    $(this).css('color', ' #3067B9');
});
//  放大镜
$('.show-img').hover(function () {
    $('.mask').show();
    $('.max-img').show();
}, function () {
    $('.mask').hide();
    $('.max-img').hide();
});

// 蒙版跟随鼠标移动
$('.show-img').mousemove(function (e) {
    // 蒙版左侧/上侧到小盒子左边/上边的距离
    var minX = e.pageX - $('.show-img').offset().left - $('.mask').width() / 2;
    var minY = e.pageY - $('.show-img').offset().top - $('.mask').height() / 2;
    // 最大值距离
    var maskmovedisX = $('.show-img').width() - $('.mask').width();
    var maskmovedisY = $('.show-img').height() - $('.mask').height();
    // 判断蒙版是否会超出盒子
    if (minX > maskmovedisX) {
        minX = maskmovedisX;
    } else if (minX < 0) {
        minX = 0
    };
    if (minY > maskmovedisY) {
        minY = maskmovedisY;
    } else if (minY < 0) {
        minY = 0
    };
    // 设置蒙版的位置
    $(".mask").css({
        left: minX,
        top: minY
    })

    // 求比例关系
    // 蒙版移动,大盒子里的图片也移动
    var radioX = minX / maskmovedisX;
    var radioY = minY / maskmovedisY;

    // 设置大图片的位置，和计算移动的距离
    $("#max-Img").css({
        left: radioX * ($('.max-img').width() - $('#max-Img').width()),
        top: radioY * ($('.max-img').height() - $('#max-Img').height())
    });
});




// console.log($('.track-con'));

var move = document.querySelector('.move');
var toparrow = document.querySelector('.top-jiantou');
var bottomarrow = document.querySelector('.bottom-jiantou');


// console.log(move.offsetTop);

function moveAnimation2(ele, index) {
    clearInterval(ele.time);
    ele.time = setInterval(function () {

        if (ele.offsetTop == index) {
            clearInterval(ele.time);
        } else {
            var targer = (index - ele.offsetTop) / 10;

            if (targer > 0) {
                targer = Math.ceil(targer)
            } else if (targer < 0) {
                targer = Math.floor(targer)
            }

            ele.style.top = ele.offsetTop + targer + "px";
        }

    }, 10)
}


toparrow.onclick = function () {
    moveAnimation2(move, -185);
}
bottomarrow.onclick = function () {
    moveAnimation2(move, 0);
}


// 左边30张图渲染

function showdata1(data) {
    var adddata = '';
    for (var key in data) {
        adddata += ` <li>
        <div class="p-img">
            <a href="">
                <img src="${data[key].goods_thumb[0]}"
                    alt="">
            </a>
        </div>
        <div class="p-name">
            <a href="">
            ${data[key].title}
            </a>
        </div>
        <div class="p-price">
        ${data[key].shop_price_formated}
        </div>
    </li>`

    }
    $('.mcm-block ul').html(adddata);
}
// console.log(allData.detailData.main[0]);
showdata1(allData.detailData.main[0]);


$('.mc-table').find('li').click(function () {
    $(this).addClass('new-inc').siblings().removeClass('new-inc');
    showdata1(allData.detailData.main[$(this).index()]);
});
// console.log(pic);


// 商品详情，用户评论等切换
$('.m-r-t-u-li').click(function () {
    $('.m-r-t-u-li').removeClass('topshowe');
    $(this).addClass('topshowe');
    var int = $(this).index();
    $('.disuss1').removeClass('showe');
    $('.disuss1').eq(int).addClass('showe');
});

$('.dis-type').click(function () {
    $(this).css('color', 'red').siblings().css('color', '')

});

// 点击开通
$('.vip-text3').click(function () {
    $('.back-mask').css('display', 'block');
});
$('pb-x').click(function () {
    $('.back-mask').css('display', 'none');
})
// 购物车加载区
// 1.库存数量加载
// console.log($('.buy-num').val());
var num = Number($('.buy-num').val());
$('.topj').click(function () {

    num = num + 1;
    $('.buy-num').val(num)
    // console.log(num);

});

$('.botl').click(function () {
    num = Number($(this).parents().prev().val()) - 1;
    $('.buy-num').val(num);
    if (num <= 1) {
        $('.all-mask2').css('display', 'block');
        $('.buy-num').val('1');
    }
})
$('.guanbi').click(function () {
    $('.all-mask1').css('display', 'none');
    $('.all-mask2').css('display', 'none');
    $('.gouwucar').css('display', 'none');
});
// 2.库存数量加载

var num1 = Number($('.buy-num1').val());
$('.jia1').click(function () {
    num1 = num1 + 1;
    $('.buy-num1').val(num1)

});

$('.jian1').click(function () {
    num1 = Number($(this).parents().prev().val()) - 1;
    // console.log(num1);
    $('.buy-num1').val(num1);
    // console.log(Number($(this).parents().prev().val()));
    if (Number($(this).parents().prev().val()) <= 1) {
        $('.all-mask2').css('display', 'block');
        $('.buy-num1').val('1');
    }
})


// 点击加入购物车
$('.shop-btn-right').click(function () {
    $('.all-mask1').css('display', 'block');
})
// 点击确定
$('.HONG').click(function () {
    $('.all-mask1').css('display', 'block');
});
// 点击取消
$('.quxiao').click(function (e) {
    e.stopPropagation();
    $('.gouwucar').css('display', 'none');
    // console.log(this);
});
// 点击购物车
$('.inner').click(function () {
    $('.gouwucar').css('display', 'block');
})
// 点击去付款
// 跳转到购物车页面

$('.pb-x').click(function(){
    $('.back-mask').css('display' , 'none')
})
// 点击继续购物
$('.btnright').click(function () {
    $('.gouwucar').css('display', 'none');
    $('.all-mask1').css('display', 'none');
})







// 从上往下渲染文本
// 渲染左上角
// $('.trigger span').text();
// $('.trigger-son .shop-li').eq()
// 主题
$('.g-i-n-c-text').text(infoData.title);
// 评价
$('.si-estimate em').text(infoData.evaluate);
// 积分
$('jifen11').text(infoData.integral);
// 红色的商城价
$('.s-p-shop-price strong').text(infoData.shop_price_formated);
// 红色VIP商城价
$('.vip-text2').text(infoData.shop_price_formated);
// 划掉的价格
$('.error-price').text(infoData.shop_price_formated);
// 销售量
$('.si-text em').text(infoData.sales);
// 品牌
$('.pinpai11').text(infoData.brand)
// 品牌LOG
$('.mc-brand').find('img').attr('src', infoData.log);
// 商品名称
$('.shop111').text(infoData.title);
// 主题
$('.name').text(infoData.title);
// 二维码
$('.big-code').find('img').attr('src', infoData.code_img);
$('.shimg').find('img').attr('src', infoData.code_img);
// 上架时间
$('.shangjia11').text(infoData.date);


// 购物车
$('.shop-btn-right').click(function(){
    allgoodsinfo()
    // if (localStorage.getItem('shopping')) {
    //     var arr = localStorage.getItem('shopping');
    // } else {
    //     var arr = '';
    // }
    // var oname = $('.name').text();
    // var obj
    // showData.main.forEach(function (value) {
    //     if (oname == value.title) {
    //         obj = value
    //     }
    // })
    // arr += JSON.stringify(obj)
    // arr += '&'
    // localStorage.setItem('shopping', arr);
})
$('.HONG').on('click' , function () {
    // var arr = localStorage.getItem('shopping')
    allgoodsinfo()
    // if (localStorage.getItem('shopping')) {
    //     var arr = localStorage.getItem('shopping');
    // } else {
    //     var arr = '';
    // }
    // var oname = $('.name').text();
    // var obj
    // showData.main.forEach(function (value) {
    //     if (oname == value.title) {
    //         obj = value
    //     }
    // })
    // arr += JSON.stringify(obj)
    // arr += '&'
    // localStorage.setItem('shopping', arr);
    // carShow(carData);
    // showsidecar(carData);
    // console.log(111);
    // console.log(carData);
})



$('.small-icon').click(function () {
    $(this).find('.square').toggleClass('choose');
    $('.contrast').toggleClass('disno')
})
$('.yincang').click(function () {
    if ($('.contrast').has('.disno')) {
        $('.contrast').removeClass('disno');
        $('.square').removeClass('choose')
    }
})
// 与购物车联动渲染
function allgoodsinfo(){
    var goodsnum = Number(localStorage.getItem('goodsnum'))
    goodsnum++;
    $('.zheng').text(goodsnum)
    var str = localStorage.getItem('goodspri')
    var sstr = str.slice(1)
    var str1 = $('.s-p-shop-price strong').text()
    var str2 = str1.slice(1)
    var goodspri = Number(sstr) + Number(str2)
    $('.salep').text('￥' + goodspri + '.00')
}
allgoodsinfo()
// ...........................bottomarrow.............................
// 处理数据
// 鞋靴箱包
// allData.shoreDta.rank[0]
// // 鞋靴箱包 热销榜
// allData.shoreDta.rank[0][0]
// 鞋靴箱包 热销榜里第一个对象
// console.log(allData.shoeData.rank[0][0].goods_thumb);
// 打印鞋靴箱包 热销榜里第一个对象的方法